<script setup>
import { ref } from 'vue'
import { addItemStockService, reduceItemStockService } from '@/api/item.js'
import { Delete } from '@element-plus/icons-vue'

// 控制对话框的显示与隐藏
const visibleDialog = ref(false)
const itemStockUpdateDTOList = ref([])
const operationType = ref('')

// 向外暴露方法
const open = (type) => {
  visibleDialog.value = true // 打开对话框
  itemStockUpdateDTOList.value = []
  operationType.value = type
}

// 提交逻辑
const emit = defineEmits(['success'])
const handleSubmit = async () => {
  if (operationType.value === '入库') {
    await addItemStockService(itemStockUpdateDTOList.value)
    ElNotification({
      title: '物品入库成功',
      type: 'success'
    })
    visibleDialog.value = false
  } else {
    await reduceItemStockService(itemStockUpdateDTOList.value)
    ElNotification({
      title: '物品出库成功',
      type: 'success'
    })
    visibleDialog.value = false
  }
  emit('success')
}

// 取消逻辑
const handleCancel = () => {
  visibleDialog.value = false
  itemStockUpdateDTOList.value = []
}

// 点击选择库存调整的物品
const itemsSelectRef = ref()
const handleSelectItem = () => {
  itemsSelectRef.value.open('选择需要库存调整的物品')
}

// 删除已选库存调整的物品
const handleSelectedItemsDelete = (row) => {
  itemStockUpdateDTOList.value = itemStockUpdateDTOList.value.filter((item) => item.id !== row.id)
}

// 处理新增服务项目物品关联信息
const handleAddSelectedItems = (items) => {
  const itemsToAdd = items.map((item) => ({
    id: item.id,
    quantity: 0,
    note: null
  }))
  // 过滤已存在的 itemId
  const newItems = itemsToAdd.filter(
    (newItem) => !itemStockUpdateDTOList.value.some((existing) => existing.id === newItem.id)
  )
  itemStockUpdateDTOList.value.push(...newItems)
}

// 显示物品信息
const activeItemId = ref() // 当前需要显示的物品ID
const showItemInfoForm = (itemId) => {
  activeItemId.value = itemId
}

defineExpose({
  open
})
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    v-model="visibleDialog"
    :title="operationType === '入库' ? '物品入库' : '物品出库'"
    width="800"
  >
    <el-button type="primary" plain @click="handleSelectItem">选择物品</el-button>
    <br /><br />
    <el-table :data="itemStockUpdateDTOList" :border="true">
      <el-table-column prop="id" label="物品ID" width="150">
        <template #default="{ row }">
          <el-popover effect="light" trigger="click" placement="right" :width="600">
            <template #reference>
              <el-tag @click="showItemInfoForm(row.id)">{{ row.id }}</el-tag>
            </template>
            <ItemInfoForm v-if="activeItemId === row.id" :itemId="row.id" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="物品数量" width="200">
        <template #default="{ row }">
          <el-input-number v-model="row.quantity" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="{ row }">
          <el-input v-model="row.note" placeholder="请输入备注" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="{ row }">
          <el-button
            type="danger"
            :icon="Delete"
            plain
            size="small"
            @click="handleSelectedItemsDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="handleCancel">取消</el-button>
        <el-button type="primary" plain @click="handleSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <ItemSelect ref="itemsSelectRef" @add="handleAddSelectedItems"></ItemSelect>
</template>
